<template>
	<view>
		<!-- 搜索组件 -->
		<Search value="搜索" />

		<!-- 轮播图 -->
		<swiper indicator-dots autoplay circular class="swiper">
			<!-- block是一个占位符，它是不会渲染到页面上，一般用来放for循环 -->
			<block v-for="(item, index) in banners" :key="index">
				<swiper-item>
					<navigator :url="'/pages/goods_detail/index?goods_id=' + item.goods_id">
						<image :src="item.image_src" mode="aspectFill"></image>
					</navigator>
				</swiper-item>
			</block>
		</swiper>

		<!-- 中间菜单 -->
		<view class="menus">
			<view class="menu-item" v-for="(item, index) in menus" :key="index">
				<!-- 分类是tabbar的页面 -->
				<navigator url="/pages/categories/index" 
				open-type="switchTab"
				v-if="index === 0">
					<image mode="aspectFill" :src="item.image_src"></image>
				</navigator>
				<!-- 非第一个元素 -->
				<navigator :url="'/pages/goods_list/index?keyword=' + item.name" v-else>
					<image mode="aspectFill" :src="item.image_src"></image>
				</navigator>
			</view>
		</view>

		<!-- 楼层 -->
		<view class="floor" v-for="(item ,index) in floors" :key="index">
			<view class="floor-title">
				<image mode="aspectFill" :src="item.floor_title.image_src"></image>
			</view>

			<view class="floor-body">
				<!-- 楼层的左边大图 -->
				<view class="floor-body-left">
					<navigator :url="'/pages/goods_list/index?keyword=' + item.product_list[0].name">
						<image :src="item.product_list[0].image_src"></image>
					</navigator>
				</view>

				<!-- 楼层的右边的四个小图 -->
				<view class="floor-body-right">

					<!-- 自定义item和index区别内嵌的for循环 -->
					<view class="body-right-item" v-for="(goods, subIndex) in item.product_list" :key="subIndex" v-if="subIndex > 0">
						<navigator :url="'/pages/goods_list/index?keyword=' + goods.name">
							<image :src="goods.image_src" mode="aspectFill"></image>
						</navigator>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	// 导入搜索组件
	import Search from "../../components/search.vue";

	export default {
		data() {
			return {
				// 轮播图的数据
				banners: [],
				// 菜单栏的数据
				menus: [],
				// 楼层的数据
				floors: []
			}
		},
		components: {
			Search
		},
		async onLoad() {
			await this.getBanners();
			await this.getMenus();
			await this.getFloors();
		},
		methods: {

			// 获取轮播图
			getBanners() {
				return new Promise((resolve, reject) => {
					// 请求轮播图的数据
					uni.request({
						url: 'https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata',
						success: (res) => {
							// 轮播图的数组
							const {
								message
							} = res.data;
							// 赋值给data
							this.banners = message;

							// 调用resolve，表示当前的promise状态完成
							resolve();
						}
					});
				});
			},

			// 获取菜单
			getMenus() {
				return new Promise((resolve, reject) => {
					// 请求菜单数据
					uni.request({
						url: 'https://api-hmugo-web.itheima.net/api/public/v1/home/catitems',
						success: (res) => {
							// 导航栏的数组
							const {
								message
							} = res.data;
							// 赋值给data
							this.menus = message;

							resolve();
						}
					});
				});
			},

			// 获取楼层数据
			getFloors() {
				return new Promise((resolve, reject) => {
					// 请求楼层数据
					uni.request({
						url: 'https://api-hmugo-web.itheima.net/api/public/v1/home/floordata',
						success: (res) => {
							// 导航栏的数组
							const {
								message
							} = res.data;
							// 赋值给data
							this.floors = message;

							resolve();
						}
					});
				});
			},
		},

		// 下拉刷新的事件
		onPullDownRefresh() {
			Promise.all([
				this.getBanners(),
				this.getMenus(),
				this.getFloors()
			]).then(res => {
				// 手动关闭下拉刷新
				uni.stopPullDownRefresh();
			})
		}
	}
</script>

<style lang="less">
	.swiper {
		height: 340rpx;

		image {
			width: 750rpx;
			height: 340rpx;
		}
	}

	/* 中间菜单栏的样式 */
	.menus {
		display: flex;
		justify-content: space-around;
		margin-top: 20rpx;
	}

	.menus image {
		width: 128rpx;
		height: 140rpx;
	}

	.floor-title image {
		margin: 20rpx 0;
		width: 750rpx;
		height: 59rpx;
		display: block;
	}

	.floor-body image {
		display: block;
	}

	.floor-body {
		display: flex;
		justify-content: space-between;
		padding: 0 12rpx;
	}

	.floor-body-left image {
		width: 232rpx;
		height: 386rpx;
		margin-right: 19rpx;
	}

	.floor-body-right {
		flex: 1;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.floor-body-right .body-right-item image {
		width: 232rpx;
		height: 188rpx;
	}
</style>
